⭐任務說明

😸 學會基本的使用路由之後，這次是動態路由！

可以怎麼做

• 我們有一組產品資料，要動態產生列表並且可以連結到指定的頁面
• 範例資料

export const data = [
  { id: 1, name: "蝦蝦", content: "可口美味" },
  { id: 2, name: "好蝦", content: "鬧事" },
  { id: 3, name: "杯具蝦", content: "QQQ" }
];

第一階段：先試著把產品列表做出來

• 使用上個任務所學到的巢狀路由

    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">首頁</Link>
          </li>
          <li>
            <Link to="/productList">產品列表</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="productList" element={<ProductList />}>
          <Route path="products" element={<Products />} />
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </BrowserRouter>

• 最終執行要的結果是，點到產品列表的時候會有產品的清單
• 點到 ProductList 後，我們要產生巢狀的路由，這邊暫時先連到一個固定的頁面
• 這邊會透過 map() 方法產生連結清單，每一筆資料都會綁定一個 key
• 再來把這每一個產品名稱，會 Link 到 products 頁面

function ProductList() {
  return (
    <div>
      <h1>產品內容</h1>
      <ul>
        {data.map((product) => (
          <li key={product.id}>
            <Link to="products">{product.name}</Link>
          </li>
        ))}
      </ul>
      <Outlet />
    </div>
  );
}

• Products 的頁面內容

function Products() {
  return <div>這是暫時的頁面喔</div>;
}

• 看一下這一個階段的結果
  

第二階段-點到指定產品顯示產品詳細內容

• 把 ProductList 改寫一下，因為每一個產品有自己的頁面，所以 Link 的頁面是各自產品的頁面
  • 這邊假設產品的頁面是 productList/produts/1
• Link 再帶上 id

function ProductList() {
  return (
    <div>
      <h1>產品內容</h1>
      <ul>
        {data.map((product) => (
          <li key={product.id}>
            <Link to={`products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
      <Outlet />
    </div>
  );
}

第三階段 - 使用 useParams

• 這是 React Router 中提供的一個 hook

URL 中傳回與 <Route path> 相符的動態參數的物件，其中子路由會繼承父路由的所有參數。

• 原本的 Route 要改成如下
• 使用 useParams ，要取到的動態值會寫成 :productId

        <Route path="productList" element={<ProductList />}>
          <Route path="products/:productId" element={<Products />} />
        </Route>

• 調整 Products，此處是透過 useParams 取得 id

function Products() {
  // 使用 useParams 取得 ID
  const { productId } = useParams();

  // 依據 ID 取得 產品
  const product = data.find((item) => item.id === parseInt(productId, 10));
  console.log(product);

  if (!product) {
    return <div>找不到產品</div>;
  }

  return (
    <div>
      <h2>產品名稱：{product.name}</h2>
      <p>{product.content}</p>
    </div>
  );
}

最終階段-看看結果

[img]https://i.imgur.com/Le3GH3K.gif[/img]

• 完整內容

結語

開始複雜了，下個任務見！